<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrapper {
            height: 200px;
            background-color: aqua;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- 父容器需要设定固定高度，并绑定父容器,父级元素只能有一个子元素即可，无需设置overflow这里为了清晰看到效果而使用 -->
    <div class="wrapper">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
            <li>34</li>
            <li>35</li>
            <li>36</li>
            <li>37</li>
            <li>38</li>
            <li>39</li>
            <li>40</li>
            <li>41</li>
            <li>42</li>
            <li>43</li>
            <li>44</li>
            <li>45</li>
            <li>46</li>
            <li>47</li>
            <li>48</li>
            <li>49</li>
            <li>50</li>
            <li>51</li>
            <li>52</li>
            <li>53</li>
            <li>54</li>
            <li>55</li>
            <li>56</li>
            <li>57</li>
            <li>58</li>
            <li>59</li>
            <li>60</li>
            <li>61</li>
            <li>62</li>
            <li>63</li>
            <li>64</li>
            <li>65</li>
            <li>66</li>
            <li>67</li>
            <li>68</li>
            <li>69</li>
            <li>70</li>
            <li>71</li>
            <li>72</li>
            <li>73</li>
            <li>74</li>
            <li>75</li>
            <li>76</li>
            <li>77</li>
            <li>78</li>
            <li>79</li>
            <li>80</li>
            <li>81</li>
            <li>82</li>
            <li>83</li>
            <li>84</li>
            <li>85</li>
            <li>86</li>
            <li>87</li>
            <li>88</li>
            <li>89</li>
            <li>90</li>
            <li>91</li>
            <li>92</li>
            <li>93</li>
            <li>94</li>
            <li>95</li>
            <li>96</li>
            <li>97</li>
            <li>98</li>
            <li>99</li>
            <li>100</li>
            <li>101</li>
            <li>102</li>
            <li>103</li>
            <li>104</li>
            <li>105</li>
            <li>106</li>
            <li>107</li>
            <li>108</li>
            <li>109</li>
            <li>110</li>
            <li>111</li>
            <li>112</li>
            <li>113</li>
            <li>114</li>
            <li>115</li>
            <li>116</li>
            <li>117</li>
            <li>118</li>
            <li>119</li>
            <li>120</li>
            <li>121</li>
            <li>122</li>
            <li>123</li>
            <li>124</li>
            <li>125</li>
            <li>126</li>
            <li>127</li>
            <li>128</li>
            <li>129</li>
            <li>130</li>
            <li>131</li>
            <li>132</li>
            <li>133</li>
            <li>134</li>
            <li>135</li>
            <li>136</li>
            <li>137</li>
            <li>138</li>
            <li>139</li>
            <li>140</li>
            <li>141</li>
            <li>142</li>
            <li>143</li>
            <li>144</li>
            <li>145</li>
            <li>146</li>
            <li>147</li>
            <li>148</li>
            <li>149</li>
            <li>150</li>
            <li>151</li>
            <li>152</li>
            <li>153</li>
            <li>154</li>
            <li>155</li>
            <li>156</li>
            <li>157</li>
            <li>158</li>
            <li>159</li>
            <li>160</li>
            <li>161</li>
            <li>162</li>
            <li>163</li>
            <li>164</li>
            <li>165</li>
            <li>166</li>
            <li>167</li>
            <li>168</li>
            <li>169</li>
            <li>170</li>
            <li>171</li>
            <li>172</li>
            <li>173</li>
            <li>174</li>
            <li>175</li>
            <li>176</li>
            <li>177</li>
            <li>178</li>
            <li>179</li>
            <li>180</li>
            <li>181</li>
            <li>182</li>
            <li>183</li>
            <li>184</li>
            <li>185</li>
            <li>186</li>
            <li>187</li>
            <li>188</li>
            <li>189</li>
            <li>190</li>
            <li>191</li>
            <li>192</li>
            <li>193</li>
            <li>194</li>
            <li>195</li>
            <li>196</li>
            <li>197</li>
            <li>198</li>
            <li>199</li>
            <li>200</li>
        </ul>
    </div>



    <script src="./bscroll.js"></script>
    <script>
        /*
            probeType: 检测滚动的位置
            默认值0：不检测；1：明确不检测；2：在手指滚动的过程中检测，手指离开后的惯性滚动过程中不检测；3：只要发生滚动，实时检测


            pullUpLoad:用于实现上拉加载更多功能，默认值false
        */
        const bscroll = new BScroll('.wrapper', {
            click: true, // 激活被scroll包裹的元素中除button之外元素的点击事件
            probeType: 3,
            pullUpLoad: true
        })

        // 监听滚动的事件
        bscroll.on('scroll', position => {
            // console.log(position)
        })

        // 监听上拉加载更多 到底部执行的事件
        bscroll.on('pullingUp', () => {
            console.log('上拉加载更多')
            // 此事件只会执行一次，需调用后手动清理释放上拉加载更多事件
            setTimeout(() => {
                bscroll.finishPullUp() // 释放上拉加载更多事件
            }, 2000)
        })
    </script>
</body>
<script>
    /*
    Object.defineProperty ->监听对象属性的改变

    Object.keys(obj).forEach(key=>{
        let value = obj[key]
        Object.defineProperty(obj,key,{
            set(newValue){
                console.log('监听'+key+'改变')
                value = newValue
            },
            get(){
                console.log('获取'+key+'对应的值')
                return value
            }
        })
    })


    发布订阅者模式 ： 当数据发生改变，界面内容也随之改变
    
    // 发布者
        class Dep {
            constructor() {
                this.subs = []
            }
            addSubs(watcher){
                this.subs.push(watcher)
            }

            // 通知
            notify(){
               this.subs.forEach(item=>{
                   item.update()
               }) 
            }
        }

    //  订阅者
    class Watcher{
        constructor(name){
            this.name = name
        }

        update(){
            console.log(this.name+'发生update')
        }
    }
*/
</script>

</html>